<template>
<div>
  <template v-for="(item, index) in menuList">
    <div style="text-align: center" :key="index">
      <i-dropdown transfer v-if="item.hide !== true" placement="right-start" :key="index" @on-click="changeMenu">
        <i-button style="width: 70pxmargin-left: -5pxpadding:10px 0" type="text">
          <i-icon :size="20" :color="iconColor" :type="item.icon"></i-icon>
        </i-button>
        <i-dropdown-menu style="width: 200px" slot="list">
          <i-dropdown-item :name="item.name"><i-icon :type="item.icon"></i-icon><span style="padding-left:10px">{{ itemTitle(item) }}</span></i-dropdown-item>
        </i-dropdown-menu>
      </i-dropdown>
    </div>
  </template>
</div>
</template>

<script>
export default {
  name: 'sidebarMenuShrink',
  props: {
    menuList: {
      type: Array
    },
    iconColor: {
      type: String,
      default: 'white'
    },
    menuTheme: {
      type: String,
      default: 'darck'
    }
  },
  methods: {
    changeMenu(active) {
      this.$emit('on-change', active)
    },
    itemTitle(item) {
      if (typeof item.title === 'object') {
        return this.$t(item.title.i18n)
      } else {
        return item.title
      }
    }
  }
}
</script>
